<template>
  <div>
    <el-drawer v-model="drawerStore.userDrawer" direction="rtl">
      <template #header>
        <h4>用户</h4>
      </template>
      <template #default>
        <el-form
          :model="formData"
          label-width="120px"
          style="margin-top: 20px; max-width: 600px;"
        >
          <el-form-item label="用户名称">
            <el-input v-model="formData.username" disabled/>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="formData.nickname"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formattedGender">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="formData.avatar" />
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input v-model="formData.email" disabled/>
          </el-form-item>
          <el-form-item label="用户电话">
            <el-input v-model="formData.phone" disabled/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useDrawerStore } from '@/stores/drawer';
import { computed } from 'vue';

const drawerStore = useDrawerStore();
const formData = drawerStore.userRow;
const formattedGender = computed(() => {
  return formData.gender === 0 ? '男' : '女';
});

function cancelClick() {
  drawerStore.userDrawer = false;
}

function confirmClick() {
  drawerStore.userDrawer = false;
}
</script>

<style scoped>

</style>
